I don't think this is problematic but what I'm wondering is if there's an opportunity to improve the readability of our code by relocating and consolidating this logic and the 'confirm-transaction-base.container.js' files logic and move it into the <ConfirmPageContainerNavigation> component which appears to already be a functional component. Doing this would make that specific part of our code much more understandable and perhaps prevent needing to do this selector logic in multiple places.

Could you take a look into this and see how much effort it'll be to consolidate? Thanks @filipsekulic

Hey @brad-decker! Good suggestion!
I refactored the code and you can see the changes here: f4b0938
However, there is a problem and you can see it in the attached screenshot, which is the reason why the pipeline is failing (e2e test).
This happens when there are multiple token approvals and when a user confirms one of them, the navigation disappears for some reason and throws the error (screenshot attached). I think the problem is in the confirm-page-container.component.js within the async componentDidMount, which the error message is also suggesting (...cancel all subscriptions and asynchronous tasks...).
I would appreciate if you could take a look and give your opinion on this one.

The "Navigate transactions - should confirm and remove an unapproved transaction" e2e test is failing because: TimeoutError: Waiting for element to be located By(xpath, .//*[contains(concat(' ', normalize-space(./@class), ' '), ' confirm-page-container-navigation ')][(contains(string(.), '1 of 3') or contains(string(.), '1of3'))])

This probably means that during the e2e test run showNavigation is false, which probably means that enumUnapprovedTxs is an empty array. Looking at this new code for getting currentNetworkUnapprovedTxs compared to the old code in confirm-transaction-base.container.js, I notice that the chainId and network are here derived from the transaction but in confirm-transaction-base.container.js they are taken directly from state.metamask.

If this feature is working when running it manually in the browser, for both custom approvals and erc-20 token transfers, then the problem is likely in e2e test fixtures (unless there is something wrong with getting the chainId and network from the transaction?... I don't think so, but worth a double check)

You are right @danjm. Good catch!
I fixed that and also made a small change that solved the problem, so now txData is being passed from a parent component.
You can check it here: 1d005ae

why did you have to change it so that txData is being passed in, instead of being selected? what problem did that solve?

When a user tries to confirm one of the transactions, it now shows the navigation, but doesn't get updated as it should - txData object being selected becomes empty, next tx cannot be seen on the next page and currentPosition is -1 as the currentTx cannot be found from enumUnapprovedTxs, because there is no txId from txData object which is empty at that moment.
Screencast:

txData is derived from state in confirm-transaction-base.container.js which means we can get it here without drilling the prop down the line

I get it, but the problem with it is that somehow the txData gets empty when one of the transactions is confirmed.
You can see it in the above attached video where txDataFromSelector is actually the transaction data derived from state. I console.log-ged it in order to show this problem...

what was the code for getting txDataFromSelector? was it derived from state in the exact same way as it is in confirm-transaction-base.container.js?

txData is derived from state in confirm-transaction-base.container.js which means we can get it here without drilling the prop down the line